<template>
  <view class="message-list">
    <view
      v-for="(item, index) in dataList"
      :key="index"
      class="list-item"
      :style="{
        '--show': item.isRead ? 'none' : 'block',
      }"
      @click="handleDetail(item)"
    >
      <uv-text :text="item.title" color="#212121" size="32rpx" lines="3" />
      <uv-text
        :text="delHtmlTag(item.content)"
        color="#757575"
        size="28rpx"
        lines="3"
        margin="20rpx 0"
      />
      <uv-text :text="item.createTime" color="#BDBDBD" size="24rpx" />
    </view>
    <uv-load-more :status="status" line />
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { delHtmlTag } from "@/common/mothed.js";
import { getMsgData } from "@/request/message";

const dataList = ref([]); // 信息列表
const status = ref("loadmore"); // 加载状态
const queryParams = ref({
  // 查询参数
  pageNum: 1,
  pageSize: 10,
  msgType: "2",
});
const total = ref(0); // 总条数

onMounted(() => {
  getList();
});

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNum = 1;
  getList();
});

// 上拉加载
onReachBottom(() => {
  if (dataList.value.length < total.value) {
    queryParams.value.pageNum++;
    getList();
  }
});

// 获取消息列表
const getList = () => {
  status.value = "loading";
  getMsgData(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      uni.stopPullDownRefresh();
    });
};

// 跳转详情
const handleDetail = (item) => {
  item.isRead = true;
  uni.navigateTo({
    url: "/pages/Message/noticeDetail?id=" + item.id,
  });
};
</script>
<style lang="scss" scoped>
.message-list {
  padding: 30rpx 40rpx;
  .list-item {
    --show: block;
    background: #ffffff;
    box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    position: relative;
    &:active {
      background-color: #f1f1f1;
    }
    &::after {
      content: "";
      display: var(--show);
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      width: 18rpx;
      height: 18rpx;
      background-color: #ff0000;
      border-radius: 50%;
    }
  }
}
</style>
